<template>
	<view>
		<view class="pb15 bgfff" id="sticky-nav"
			style="z-index: 9999;width: 100%;position: fixed;display: flex;align-items: center;padding-top:20rpx;">
			<view class="ml25 mr25 search flex flex-ac pl25 pr25" style="border-radius: 50rpx;width: 70%;">
				<image src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/search.png"
					mode="widthFix"></image>
				<input class="it1" @input="setKeyword" @confirm="search" />
			</view>
			<view style="color: rgba(138, 97, 28, 1);" @click="search">
				搜索
			</view>
		</view>
		<tui-tab :tabs="tabs" scroll @change="change" :bold='true' selectedColor='rgba(138, 97, 28, 1)'
			sliderBgColor="rgba(138, 97, 28, 1)" :isFixed='true' :top="41"></tui-tab>
		<view class=""
			style="width: 92vw;margin: auto;text-align: center;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 200rpx;padding-bottom: 200rpx;">
			<view class=""
				style="background-color: #fff;width: 46%;margin: 10rpx 0;padding:20rpx 10rpx;border-radius: 15rpx;height: 28vh;"
				v-for="item in list">
				
				<view class="" @click="showDetail(item)">
					<image src="https://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/ycfyzyf/2j.png"
						mode="widthFix" style="width: 150rpx;"></image>
				</view>
				<view class="" style="color: rgba(255, 139, 0, 1);margin-top: 10rpx;">{{item.chinRecipeName}}
				</view>
				<view class="" style="height: 7vh;">
					<view class="" style="font-size: 35rpx;margin-top: 10rpx;">
						{{item.price}}
					</view>
					<view style="height: 1rpx;background-color: #ccc8c7;width: 100%;margin: 20rpx auto;"></view>
					<view class="" @click="isclick(item)"
						style="text-align: center;background-color: rgba(138, 97, 28, 1);border-radius: 30rpx;color: #fff;width: 100rpx;margin: auto;margin-top: 30rpx;padding: 10rpx;"
						v-if="showNum">
						选择
					</view>
					<view class="" style="margin-top: 10rpx;" v-else>
						<tui-numberbox :value="item.number" :step="1" @change="changeNum(item,$event)"
							iconBgColorAdd='rgba(138, 97, 28, 1)' iconBgColorDel='#fff'
							iconBorderDel="1rpx solid rgba(138, 97, 28, 1)" radius='25%' :iconSize='20'
							iconColorAdd='#ffffff' min="0"></tui-numberbox>
					</view>
				</view>
				
				
				
			</view>

		</view>
		<view class="tabbar">
			<view class=""
				style="background-color: red;position: absolute;bottom:100rpx;left: 100rpx;width: 30rpx;color: #fff;border-radius: 50%;text-align: center;">
				{{orderlist.length}}
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;">
				<image @click="car()" src="../../static/images/car.png"
					mode="widthFix" style="width: 100rpx;"></image>
				<view class="" style="margin-left: 10rpx;">
					<view class="" style="">
						{{priceAll}}
					</view>
					<view class="" style="font-size: 22rpx;color: #ef8b0f;">
						不含复诊费用
					</view>
				</view>
			</view>
			<view class="" style="margin-right: 20rpx;">
				<button style="border-radius: 35rpx;color: #fff;background-color: rgba(138, 97, 28, 1);width: 200rpx;"
					:disabled="orderlist.length==0" @click="goform">购买</button>
			</view>
		</view>
		<wyb-popup ref="popup" type="bottom" height="500" width="500" radius="2" :showCloseIcon="true"
			style="padding: 20rpx;">
			<view style="text-align: center;font-size: 30rpx;font-weight: 700;">已选药方</view>
			<view style="border: 1rpx solid gainsboro;margin-top: 20rpx;"></view>
			<view class="">
				<tui-checkbox-group @change="checkGroup">
					<view class="" v-for="(item,index) in orderlist" :key="index">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<tui-label style="width: 80%;">
								<tui-list-cell :unlined='true' padding="35rpx">
									<view class="thorui-align__center">
										<tui-checkbox :checked="item.checked" :value="item.id" color="#f8683c"
											borderColor="#999">
										</tui-checkbox>
										<text class="tui-text"
											style="margin-left: 10rpx;">{{item.chinRecipeName}}</text>
									</view>
								</tui-list-cell>
							</tui-label>

							<tui-numberbox :value="item.number" :step="1" @change="changeCar(item,$event)"
								iconBgColorAdd='rgba(138, 97, 28, 1)' iconBgColorDel='#fff'
								iconBorderDel="1rpx solid rgba(138, 97, 28, 1)" radius='25%' :iconSize='20'
								iconColorAdd='#ffffff' min="0"></tui-numberbox>
						</view>
					</view>
				</tui-checkbox-group>
			</view>
		</wyb-popup>
		<!-- 遮罩层 -->
		<view class="" style="text-align: left;">
			<view v-if="isDetail" class="mask" @click="closeDetail"></view>
			<!-- 弹窗内容 -->
			<view v-if="isDetail" class="popup">
				<view class="close-icon" @click="closeDetail">
					<image src="/static/images/close.png" mode="widthFix"></image>
				</view>
				<view class="popup-image">
					<image :src="info.url" mode="widthFix"></image>
				</view>
				<view class="popup-content">
					<view class="title">{{info.chinRecipeName}}</view>
					<view class="audio-icon" @click="pay(info.recipeUsage)">
						<image src="/static/images/audio.png" mode="widthFix"></image>
						<text>语音播放</text>
					</view>
					
				</view>
				<view class="spec">规格：{{info.spec}}</view>
				<view class="price">￥{{info.price}}</view>
				<view class="manufacturer">生成厂家：{{info.provider}}</view>
				<view class="description">
					药品说明：{{info.recipeUsage}}
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	const plugin = requirePlugin('WechatSI');
	import tuiTab from '../components/tui-tab/tui-tab.vue'
	import tuiNumberbox from "../components/tui-numberbox/tui-numberbox.vue"
	export default {
		components: {
			tuiTab,
			tuiNumberbox,
		},
		data() {
			return {
				tabs: ['全部', '分类1', '分类3', '分类2'],
				keyword: '',
				list: [],
				curent: 0,
				priceAll: 0,
				orderlist: [],
				usrUserId: '',
				showNum: true,
				isDetail:false,
				info:{}
			};
		},
		onLoad() {
			this.getList()
			this.usrUserId = uni.getStorageSync('usrUserId')
		},
		onShow() {
		},
		methods: {
			
			// 语音
			pay(content){
				      plugin.textToSpeech({
				        lang: 'zh_CN',
				        tts: true,
				        content,
				        success: res => {
				          uni.hideLoading();
				          const innerAudioContext = uni.createInnerAudioContext();
				          innerAudioContext.src = res.filename;
				          innerAudioContext.play();
				        },
				        fail: () => {
				          uni.hideLoading();
				          uni.showToast({ title: '播放失败', icon: 'none' });
				        }
				      });
			},
			showDetail(item) {
				this.isDetail = true
				uni.request({
					url:'https://app.mzmzb.com/application-usrapp/zyf/getZyfInfoById.tz?id='+item.id,
					method:'GET',
					success: (res) => {
						this.info=res.data.result
					}
					
				})
			},
			closeDetail() {
				this.isDetail = false
			},
			isclick(item) {
				this.showNum = false
				this.orderlist.push({
					'checked': true,
					"zyfRecipeId": item.id,
					'price': Number(item.price),
					'id': item.id,
					'number': item.number,
					"userId": this.usrUserId,
					'drugFee': item.number * Number(item.price),
					'chinRecipeName': item.chinRecipeName
				})
				this.priceAll = this.orderlist.reduce((a, b) => {
					return a + (Number(b.drugFee) || 0); // 如果 drugFee 不存在，默认加 0
				}, 0);
				console.log(this.orderlist)
			},
			    setKeyword(event) {
			      this.keyWord = event.detail.value; // 更新关键词
			    },
			    search() {
			      this.getList(this.keyWord); // 调用获取列表的方法
			    },
			getList(keyword) {
				let url='https://app.mzmzb.com/application-usrapp/zyf/getZyfList.tz?hspId=23840'
				if(keyword){
					url='https://app.mzmzb.com/application-usrapp/zyf/getZyfList.tz?hspId=23840&chinRecipeName='+keyword
				}
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						this.list = res.data.result.list

					}
				})
			},
			change(e) {
				this.curent = e

			},
			car() {
				this.$refs.popup.show()
			},
			changeCar(item, e) {
				item.number = e.value
				let priceAll = 0
				this.list.forEach((j, k) => {
					if (j.id == String(item.id)) {
						j.number = e.value
						item.drugFee = j.number * Number(j.price)
					}
				})
				this.priceAll = this.orderlist.reduce((a, b) => {
					return a + (Number(b.drugFee) || 0); // 如果 drugFee 不存在，默认加 0
				}, 0); // 初始值为 0
				uni.setStorageSync('priceAll', this.priceAll)
				if (e.type == "reduce") {
					if (item.number == 0) {
						this.orderlist.forEach((e, i) => {
							if (item.id == e.id) {
								this.orderlist.splice(i, 1)
							}
						})
					}
				}
				console.log(this.orderlist, 222)
			},
			changeNum(item, e) {
				console.log(e)
				item.number = e.value
				if (e.type == "plus") {
					if (this.orderlist.length < 1) {
						this.orderlist.push({
							'checked': true,
							"zyfRecipeId": item.id,
							'price': Number(item.price),
							'id': item.id,
							"userId": this.usrUserId,
							'number': e.value,
							'drugFee': e.value * Number(item.price),
							'chinRecipeName': item.chinRecipeName
						})
					} else {
						let found = this.orderlist.find(e => e.zyfRecipeId == item.id);
						if (found) {
							found.number = e.value
							found.drugFee = e.value * Number(item.price)
						} else {
							this.orderlist.push({
								'checked': true,
								"zyfRecipeId": item.id,
								'price': Number(item.price),
								'id': item.id,
								'number': e.value,
								"userId": this.usrUserId,
								'drugFee': e.value * Number(item.price),
								'chinRecipeName': item.chinRecipeName
							});
						}
					}
				}
				if (e.type == 'reduce') {
					this.orderlist.forEach((e, i) => {
						if (this.orderlist.length == 1) {
							if (item.number == 0) {
								this.orderlist = []
							} else {
								e.number = item.number
								e.drugFee = e.number * Number(item.price)
							}
						} else if (this.orderlist.length > 1) {
							if (e.zyfRecipeId == item.id) {
								if (item.number == e.number) {
									this.orderlist.splice(i, 1)
								} else {
									e.number = item.number
									e.drugFee = e.number * Number(item.price)
								}

							}
						}
					})
				}
				this.priceAll = this.orderlist.reduce((a, b) => {
					return a + (Number(b.drugFee) || 0); // 如果 drugFee 不存在，默认加 0
				}, 0);
				console.log(this.orderlist)
			},
			goform(){
				console.log(this.orderlist)
				let ids = this.orderlist.map(item => item.id)
				uni.setStorageSync('orderIds',ids)
				uni.setStorageSync('orderlist',this.orderlist)
					uni.navigateTo({
						url: '/pages4/doctor/index?docId=9000088' + '&usrUserId=' + this.usrUserId + '&recNum=144'
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.tabbar {
		background-color: #fff;
		width: 100vw;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		align-items: center;
		z-index: 999;
	}


	#sticky-nav {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.search {
		height: 65rpx;
		background: #efefef;
		border-radius: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	// ==============
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.number {
		margin-top: -20rpx;
		width: 50rpx;
		background-color: rgba(85, 170, 255, 0.1);
		color: #4089e1;
		font-size: 22rpx;
		text-align: center;
	}

	.tui-searchbox {
		width: 100%;
		height: 92rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		max-width: 500px;
		left: 50%;
		transform: translateX(-50%);
		/* #endif */
		z-index: 100;
	}

	.tui-searchbox::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #d2d2d2;
		transform: scaleY(0.5) translateZ(0);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-search-input {
		width: 100%;
		height: 60rpx;
		background: #f2f2f2;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-search-text {
		padding-left: 16rpx;
	}

	.tab-view {
		width: 200rpx;
		position: fixed;
		left: 0;
		z-index: 10;
		/* #ifdef H5 */
		position: absolute;
		/* #endif */
	}

	.tab-bar-item {
		width: 200rpx;
		height: 110rpx;
		background: #f2f2f2;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
	}

	.tui-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.tui-active::before {
		content: '';
		position: absolute;
		border-left: 8rpx solid #BE965B;
		height: 30rpx;
		left: 0;
	}

	/* 左侧导航布局 end*/

	.tui-right__box {
		width: 100%;
		/* position: fixed; */
		position: absolute;
		padding-left: 200rpx;
		box-sizing: border-box;
		top: 150rpx;
		left: 0;
		/* #ifdef H5 */
		max-width: 500px;
		left: 50%;
		transform: translateX(-50%);
		/* #endif */
	}

	.tui-page__view {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-header-top {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333;
		background-color: #fff;
		position: relative;
	}

	.tui-header-top::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #EFEFEF;
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top-item {
		height: 88rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-icon-box {
		line-height: 13px !important;
		padding: 0 !important;
		display: block !important;
		position: relative;
	}

	.tui-arrow-up {
		top: 6px;
	}

	.tui-arrow-down {
		top: -2px;
	}

	.tui-color__active {
		color: #BE965B;
	}

	.tui-filter__box {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 12rpx 0;
		background-color: #FCFCFC;
	}

	.tui-filter__item {
		padding: 12rpx 20rpx;
		font-size: 30rpx;
		word-break: break-all;
	}

	.tui-goods__item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-image__box {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex-shrink: 0;
		margin-right: 16rpx;
	}

	.tui-image__box image {
		max-width: 100%;
		max-height: 150rpx;
		display: block;
	}

	.tui-content {
		font-size: 28rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.tui-title {
		width: 100%;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: 500;
	}

	.tui-title1 {
		width: 100%;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 26rpx;
		color: #b99d80;
	}

	.tui-price {
		color: #C72727;
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 888;
	}
	
	.popup {
		width: 90%;
		margin: auto;
		background-color: #fff;
		position: absolute;
		left: 5%;
		min-height: 60vh;
		top: 15vh;
		border-radius: 20rpx;
		z-index: 999;
		padding: 20rpx 0;
	}
	
	.close-icon {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
	
	.close-icon image {
		width: 64rpx;
	}
	
	.popup-image {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
	}
	
	.popup-image image {
		width: 90%;
	}
	
	.popup-content {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	
	.popup-content .title {
		font-size: 38rpx;
		font-weight: 400;
		color: #000;
	}
	
	.popup-content .audio-icon {
		display: flex;
		align-items: center;
	}
	
	.popup-content .audio-icon image {
		width: 61rpx;
	}
	
	.popup-content .audio-icon text {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(87, 61, 34, 0.7);
	}
	
	.spec {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(87, 61, 34, 0.7);
		padding: 10rpx 20rpx;
	}
	
	.price {
		font-size: 38rpx;
		font-weight: 400;
		color: rgba(255, 139, 0, 1);
		padding: 10rpx 20rpx;
	}
	
	.manufacturer {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(87, 61, 34, 0.7);
		padding: 10rpx 20rpx;
	}
	
	.description {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(87, 61, 34, 0.7);
		padding: 20rpx;
	}
</style>